{if $action}
<div class="flex flex-col">
	<div class="overflow-x-auto sm:-mx-6 lg:-mx-16">
		<div class="py-2 inline-block min-w-full sm:px-6 lg:px-16">
			<div class="actions">
				{if $add}
				{if is_array($add)}
				{:yoyo_render('button', array_merge(['text'=>'添加', 'href'=>strtolower(admin_url('add')), 'size'=>'small'], $add))}
				{else /}
				{:yoyo_render('button', ['text'=>'添加', 'href'=>strtolower(admin_url('add')), 'size'=>'small'])}
				{/if}
				{/if}
			</div>
			<div class="form-outline mt-4 mb-4">
              <input type="text" name="keyword" class="form-control" id="{$id}-search-input" yoyo:post="render" value="{$keyword}" yoyo:on="keyup delay:300ms changed" yoyo:spinning.class="text-gray-300"/>
              <label class="form-label" for="{$id}-search-input" style="margin-left: 0px;">{$search_label}
              	<div yoyo:spinning.class.remove="hidden" class="inline-block hidden">
				    <div class="spinner-border animate-spin inline-block w-4 h-4 border-4 rounded-full" role="status">
				      <span class="visually-hidden">Loading...</span>
				    </div>
			  	</div>
              </label>
            	<div class="form-notch">
            		<div class="form-notch-leading" style="width: 9px;"></div>
            		<div class="form-notch-middle" style="width: 47.2px;"></div>
            		<div class="form-notch-trailing"></div>
            	</div>
            </div>
			<div class="overflow-hidden">
				<table class="{$column_width == 'auto'?'table-auto':'table-fixed'} min-w-full {if $border} border{/if}">
					<thead class="{$theader_color} border-b">
						<tr>
							{if $checkble}
							<th scope="col">
								<div class="form-check text-center mb-0">
								    <input class="datatable-header-checkbox form-check-input" type="checkbox" yoyo:on="change" yoyo:get="checkAll({$check})" {if $check == 0} checked {/if}/>
							  	</div>
							</th>
							{/if}
							{volist name="render_column" id="column"}
							<th scope="col" class="text-sm font-medium text-gray-900 px-6 py-{$min?2:4} text-left {if $border} border-r{/if}">{$column.title?? $column.name}</th>
							{/volist}
							{if $edit && $delete}
							<th scope="col" class="text-sm font-medium text-gray-900 px-6 py-{$min?2:4} text-left {if $border} border-r{/if}">操作</th>
							{/if}
						</tr>
					</thead>
					<tbody>
						{volist name="render_data" id="row"}
						{php}$mod = $key % 2;{/php}
						<tr class="{if $striped}{if $mod ==0} bg-white {else /} bg-gray-100 {/if}{else /} bg-white {/if}
						border-b {if $border} border-r{/if}">
							{if $checkble}
							<td scope="col">
								<div class="form-check text-center mb-0">
								    <input class="datatable-header-checkbox form-check-input" type="checkbox" yoyo:on="change" yoyo:get="checkToggle({$row[$pk]})" {if in_array($row[$pk], $checked)} checked {/if}>
							  	</div>
							</td>
							{/if}
							{volist name="row" id="column"}
							<td class="table-cell px-6 py-{$min?2:4} whitespace-nowrap text-sm font-light text-gray-900 {if $border} border-r{/if}">
							{php}
							$field_key = array_search($key, array_column($render_column, 'name'));
							{/php}
							{switch render_column[$field_key]['type']}
							{case label}
							{php}
							$field_options = $render_column[$field_key]['name'].'_options';
							{/php}
							{$$field_options[$column]}
							{/case}
							{case byte}
							{$column|format_bytes}
							{/case}
							{case status}
							<span class="inline-block py-1.5 px-2.5 leading-none text-center whitespace-nowrap align-baseline font-bold {$column == 1?'bg-green-600':'bg-yellow-500'} text-white rounded">
							{$column == 1? '启用' : '禁用'}
							</span>
							{/case}
							{default /}{$column|raw}
							{/switch}
							</td>
							{/volist}
							{if $edit && $delete}
							<td>
								{if $edit}
								{:yoyo_render('link', ['text'=>'编辑', 'href'=>strtolower(admin_url('edit', ['id'=>$row[$pk]]))])}
								{/if}
								{if $delete}
								{:yoyo_render('link', [
									'text'=>'删除',
									'href'=>strtolower(admin_url('delete', ['ids'=>$row[$pk], '_t'=>$table_token])),
									'default'=>'transition duration-300 ease-in-out mb-4 ajax-get',
								])}
								{/if}
							</td>
							{/if}
						</tr>
						{/volist}
					</tbody>
				</table>
			</div>
		</div>
	</div>
</div>
{else /}
<div class="flex flex-col">
	<div class="overflow-x-auto sm:-mx-6 lg:-mx-8">
		<div class="py-2 inline-block min-w-full sm:px-6 lg:px-8">
			<div class="overflow-hidden">
				<table class="{$column_width == 'auto'?'table-auto':'table-fixed'} min-w-full {if $border} border{/if}">
					<thead class="{$theader_color} border-b">
						<tr>
							{volist name="render_column" id="column" }
							<th scope="col" class="text-sm font-medium text-gray-900 px-6 py-{$min?2:4} text-left {if $border} border-r{/if}">
								{$column.title?? $column.name}
							</th>
							{/volist}
						</tr>
					</thead>
					<tbody>
						{volist name="render_data" id="row"}
						{php}$mod = $key % 2;{/php}
						<tr class="{if $striped}{if $mod ==0} bg-white {else /} bg-gray-100 {/if}{else /} bg-white {/if}
						border-b {if $border} border-r{/if}">
							{volist name="row" id="column"}
							<td class="px-6 py-{$min?2:4} whitespace-nowrap text-sm font-light text-gray-900 {if $border} border-r{/if}">{$column}</td>
							{/volist}
						</tr>
						{/volist}
					</tbody>
				</table>
			</div>
		</div>
	</div>
</div>
{/if}
<div>
	{if $paginate}
	<div class="flex justify-center">{$paginate|raw}</div>{/if}
</div>